<%-- 
    Document   : content
    Created on : Nov 16, 2011, 7:27:00 PM
    Author     : NguyenKhoi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<div id="mainContent">
    <div class="roundBox" id="productShelf">
        <div class="shelfHomeDiv border-right" id="shelfHomeiPadFamily">
            <a href="#">
                <img style="text-align:left" src="images/shelf-home-ipad2.png" alt="iPad" />
                <span class="productName">iPad</span><br/>
                <span class="productPrice">From $499</span>
            </a>
        </div>
        <div class="shelfHomeDiv border-right" id="shelfHomeiPhoneFamily">
            <a href="#" >
                <img style="text-align:left" src="images/shelf-home-iphone4s-wb.png" />
                <span class="productName">iPhone</span><br/>
                <span class="productPrice">From $0</span>
            </a>
        </div>
        <div class="shelfHomeDiv" id="shelfHomeiPadTouch">
            <a href="#">
                <img style="text-align:left" src="images/shelf-home-touch-bw.png" alt="iPodTouch" />
                <span class="productName">iPod Touch</span><br/>
                <span class="productPrice">From $199</span>
            </a>
        </div>
        <div class="shelfHomeDiv" id="shelfHomeiPodNano">
            <a href="#">
                <img style="text-align:left" src="images/shelf-home-nano-colors.png" alt="iPodNano" />
                <span class="productName">iPod nano</span><br/>
                <span class="productPrice">From $129</span>
            </a>
        </div>
        <div class="shelfHomeDiv" id="shelfHomeiPodShuffer">
            <a href="#">
                <img style="text-align:left" src="images/shelf-home-shuffle.png" alt="iPodShuffer" />
                <span class="productName">iPod shuffer</span><br/>
                <span class="productPrice">Just $49</span>
            </a>
        </div>
        <div class="shelfHomeDiv border-right" id="shelfHomeiPodClassic">
            <a href="#">
                <img style="text-align:left" src="images/shelf-home-classic.png" alt="iPodShuffer" />
                <span class="productName">iPod classic</span><br/>
                <span class="productPrice">Just $49</span>
            </a>
        </div>
        <div class="shelfHomeDiv" id="shelfHomeappleTV">
            <a href="#">
                <img style="text-align:left" src="images/shelf-home-appletv2.png" alt="AppleTV" />
                <span class="productName">Apple TV</span><br/>
                <span class="productPrice">Just $99</span>
            </a>
        </div>
        <div class="line"></div>

        <div class="shelfHomeDiv" id="shelfHomeMbair">
            <a href="#">
                <img  src="images/shelf-home-mbair.png" alt="MacbookAir" />
                <span class="productName">Macbook Air</span><br/>
                <span class="productPrice">From $999</span>
            </a>
        </div>
        <div class="shelfHomeDiv" id="shelfHomeMbpro">
            <a href="#">
                <img  src="images/shelf-home-mbpro.png" alt="MacbookPro" />
                <span class="productName">Macbook Pro</span><br/>
                <span class="productPrice">From $1199</span>
            </a>
        </div>
        <div class="shelfHomeDiv" id="shelfHomeMacmini">
            <a href="#">
                <img  src="images/shelf-home-mini.png" alt="Mac mini" />
                <span class="productName">Mac mini</span><br/>
                <span class="productPrice">From $599</span>
            </a>
        </div>
        <div class="shelfHomeDiv" id="shelfHomeiMac">
            <a href="#">
                <img  src="images/shelf-home-imac.png" alt="iMac" />
                <span class="productName">iMac</span><br/>
                <span class="productPrice">From $1199</span>
            </a>
        </div>
        <div class="shelfHomeDiv" id="shelfHomeMacPro">
            <a href="#">
                <img  src="images/shelf-home-macpro.png" alt="MacPro" />
                <span class="productName">Mac Pro</span><br/>
                <span class="productPrice">From $1199</span>
            </a>
        </div>
        <div class="clearBoth"></div>
    </div>

    <!--- product2011 ----><!---- end product2011 ---->

    <div id="featuredAccessories">
        <div class="boxHeader mediumHeader"><span>Staff Picks<span></div>
                    <div class="roundBoxBottom featuredAccessoriesContent">
                        <div class="product border-right border-bottom">
                            <a href="#">
                                <span class="productName">Apple iPhone 4 Bumper - Blue</span><br/>
                                <img class="productImage" src="images/MC670.jpg" alt="productImage"/>
                                <img class="productRate" src="images/stars_61x13_bluonwht_30.gif" alt="productRate"/><br/>

                                <span class="productPrice">$29.00</span>
                            </a>
                        </div>
                        <div class="product border-right border-bottom">
                            <a href="#">
                                <span class="productName">Apple iPhone 4 Bumper - Blue</span><br/>
                                <img class="productImage" src="images/MC670.jpg" alt="productImage"/>
                                <img class="productRate" src="images/stars_61x13_bluonwht_30.gif" alt="productRate"/><br/>

                                <span class="productPrice">$29.00</span>
                            </a></div>
                        <div class="product border-right border-bottom">
                            <a href="#">
                                <span class="productName">Apple iPhone 4 Bumper - Blue</span><br/>
                                <img class="productImage" src="images/MC670.jpg" alt="productImage"/>
                                <img class="productRate" src="images/stars_61x13_bluonwht_30.gif" alt="productRate"/><br/>

                                <span class="productPrice">$29.00</span>
                            </a></div>
                        <div class="product border-bottom">
                            <a href="#">
                                <span class="productName">Apple iPhone 4 Bumper - Blue</span><br/>
                                <img class="productImage" src="images/MC670.jpg" alt="productImage"/>
                                <img class="productRate" src="images/stars_61x13_bluonwht_30.gif" alt="productRate"/><br/>

                                <span class="productPrice">$29.00</span>
                            </a>
                        </div>
                        <div class="product border-right">
                            <a href="#">
                                <span class="productName">Apple iPhone 4 Bumper - Blue</span><br/>
                                <img class="productImage" src="images/MC670.jpg" alt="productImage"/>
                                <img class="productRate" src="images/stars_61x13_bluonwht_30.gif" alt="productRate"/><br/>

                                <span class="productPrice">$29.00</span>
                            </a>
                        </div>
                        <div class="product border-right">
                            <a href="#">
                                <span class="productName">Apple iPhone 4 Bumper - Blue</span><br/>
                                <img class="productImage" src="images/MC670.jpg" alt="productImage"/>
                                <img class="productRate" src="images/stars_61x13_bluonwht_30.gif" alt="productRate"/><br/>

                                <span class="productPrice">$29.00</span>
                            </a>
                        </div>
                        <div class="product border-right">
                            <a href="#">
                                <span class="productName">Apple iPhone 4 Bumper - Blue</span><br/>
                                <img class="productImage" src="images/MC670.jpg" alt="productImage"/>
                                <img class="productRate" src="images/stars_61x13_bluonwht_30.gif" alt="productRate"/><br/>

                                <span class="productPrice">$29.00</span>
                            </a>
                        </div>
                        <div class="product">
                            <a href="#">
                                <span class="productName">Apple iPhone 4 Bumper - Blue</span><br/>
                                <img class="productImage" src="images/MC670.jpg" alt="productImage"/>
                                <img class="productRate" src="images/stars_61x13_bluonwht_30.gif" alt="productRate"/><br/>

                                <span class="productPrice">$29.00</span>
                            </a>
                        </div>
                        <div class="clearBoth"></div>
                    </div>

                    </div>
                    <div id="whyBuy" style="display:none">
                        <div class="boxHeader mediumHeader" ><span>Why buy at Apple Store<span></div>
                                    <div id="whyBuyContent" class="roundBoxBottom"></div>
                                    </div>
                                    </div>

                                    <!----- end mainContent ------>

<div id="sidebarRight">
    <!-- New to the Store --->
    <div class="sideBarBox" id="newToTheStore">
        <div class="boxHeader smallHeader"><span>New to the Store</span></div>
        <div class="sideBarBoxContent roundBoxBottom" >
            <div class="listContent" >
                <ul>
                    <li><a href="#">iPhone 4S</a></li>
                    <li><a href="#">iPhone 4</a></li>
                    <li><a href="#">iPod Touch</a></li>
                    <li><a href="#">iPod nano</a></li>
                    <li><a href="#">iPhone - AppleCare+</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end New to the Store --->

    <!-- Top sellers --->
    <div class="sideBarBox" id="topSellers">
        <div class="boxHeader smallHeader"><span>Top Sellers </span></div>
        <div class="sideBarBoxContent roundBoxBottom" >
            <!-- top seller iPad ---->
            <div class="listHeader"><span>iPad</span></div>
            <div class="listContent">
                <ol class="orderListStyle">
                    <li><a href="#" >iPad 2</a></li>
                    <li><a href="#" >iPad Smart Cover</a></li>
                </ol>
            </div>
            <!--- end top seller iPad------>
            <!-- top seller iPhone ---->
            <div class="listHeader"><span>iPhone</span></div>
            <div class="listContent">
                <ol class="orderListStyle">
                    <li><a href="#" >iPhone 4</a></li>
                    <li><a href="#" >iPad Smart Cover</a></li>
                </ol>
            </div>
            <!--- end top seller iPhone------>
            <!-- top seller Mac ---->
            <div class="listHeader"><span>Mac</span></div>
            <div class="listContent">
                <ol class="orderListStyle">
                    <li><a href="#" >Macbook Pro</a></li>
                    <li><a href="#" >iMac</a></li>
                </ol>
            </div>
            <!--- end top seller Mac------>
            <!-- top seller iPod ---->
            <div class="listHeader"><span>iPod</span></div>
            <div class="listContent">
                <ol class="orderListStyle">
                    <li><a href="#" >iPod Touch</a></li>
                    <li><a href="#" >iPod Nano</a></li>
                </ol>
            </div>
            <!--- end top seller iPod------>
        </div>
    </div>
    <!-- end Top sellers --->

    <!--- Store Service ----->
    <div class="sideBarBox" id="storeService">
        <div class="boxHeader smallHeader"><span>Store Service</span></div>
        <div class="sideBarBoxContent roundBoxBottom">
            Service
        </div>
    </div>
    <!--- end Store Service ---->

    <!-- end .sidebar2 --></div>
